import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:yurun_smartmerchants/res/colours.dart';
import 'package:yurun_smartmerchants/utils/app_size.dart';

class OnTheShelfPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _OnTheShelfPageState();
  }
}

class _OnTheShelfPageState extends State<OnTheShelfPage> {
  bool selected = false;
  int currentIndex = 0;
  int count = 5;
  var goods = ['全部', '豆类', '白菜类', '豆制品', '叶菜', '果核类'];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: CupertinoScrollbar(
          child: Container(
        color: Colours.app_background,
        child: Row(
          children: <Widget>[
            Container(
              color: Color(0Xffefefef),
              width: AppSize.width(157),
              child: ListView.builder(
                  itemCount: 6,
                  itemBuilder: (BuildContext context, int index) {
                    if (index == currentIndex) {
                      selected = true;
                    } else {
                      selected = false;
                    }
                    return _leftItem(index);
                  }),
            ),
            Container(
              width: AppSize.width(1),
              color: Color(0xffefefef),
            ),
            Expanded(
                child: Container(
              color: Colors.white,
              child: ListView.separated(
                  physics: BouncingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    return _rightItem(index);
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return Divider(
                      height: AppSize.height(1),
                      thickness: AppSize.height(1),
                      color: Color(0xffefefef),
                    );
                  },
                  itemCount: count),
            ))
          ],
        ),
      )),
    );
  }

  Widget _leftItem(index) {
    return GestureDetector(
      onTap: () {
        count = 5;
        setState(() {
          currentIndex = index;
          count += index;
        });
//        showToast('index:$index');
      },
      child: Container(
        height: AppSize.height(120),
        child: Row(
          children: <Widget>[
            Offstage(
              offstage: !selected,
              child: Container(
                color: Color(0xffdd4b39),
                width: AppSize.width(5),
              ),
            ),
            Expanded(
                child: Container(
              alignment: Alignment.center,
              color: selected ? Colours.white : Color(0Xffefefef),
              child: Text(
                goods[index],
                style: TextStyle(
                    fontSize: AppSize.sp(28),
                    color: selected ? Color(0xffdd4b39) : Color(0xff626262)),
              ),
            ))
          ],
        ),
      ),
    );
  }

  Widget _rightItem(index) {
    return Material(
      color: Colors.white,
      child: InkWell(
        onTap: () {},
        child: Container(
          height: AppSize.height(267),
          child: Column(
            children: [
              Row(
                children: <Widget>[
                  Container(
                    width: AppSize.height(147),
                    padding: EdgeInsets.all(AppSize.height(15)),
                    child: Image.network(
                      'https://imgwmmstestfort.epfresh.cn/2020%2F08%2F14%2F1597398833038_1597398833038.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                  Container(
                    width: AppSize.width(170),
                    alignment: Alignment.centerLeft,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('药用果实',
                            style: TextStyle(
                              fontSize: AppSize.sp(32),
                              color: Colours.color_313131,
                            ),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1),
                        Container(
                          margin: EdgeInsets.only(
                              top: AppSize.height(10), right: AppSize.width(5)),
                          padding: EdgeInsets.only(
                              left: AppSize.width(5),
                              right: AppSize.width(5),
                              bottom: AppSize.height(2)),
                          decoration: ShapeDecoration(
                              color: Color(0xffefefef),
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(AppSize.height(5))))),
                          child: Text(
                            '10公斤/散装',
                            style: TextStyle(
                                fontSize: AppSize.sp(24),
                                color: Color(0xff434343)),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                      child: Container(
                    height: AppSize.height(147),
                    alignment: Alignment.bottomLeft,
                    padding: EdgeInsets.only(bottom: AppSize.height(36)),
                    child: Row(
                      children: <Widget>[
                        ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: AppSize.width(180),
                          ),
                          child: Text(
                            '库存99999公斤',
                            style: TextStyle(
                                fontSize: AppSize.sp(26),
                                color: Color(0xffeb3323)),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: AppSize.height(2)),
                          child: Icon(
                            Icons.arrow_forward_ios,
                            color: Color(0xffaaaaaa),
                            size: AppSize.sp(26),
                          ),
                        )
                      ],
                    ),
                  )),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RaisedButton(
                      child: Text('删除'),
                      color: Colours.title_bg,
                      textColor: Color(0xff626262),
                      onPressed: () {}),
                  RaisedButton(
                      child: Text('编辑'),
                      color: Colours.title_bg,
                      textColor: Color(0xff626262),
                      onPressed: () {}),
                  RaisedButton(
                      child: Text('上架'),
                      color: Colours.title_bg,
                      textColor: Color(0xff626262),
                      onPressed: () {}),
                  RaisedButton(
                      child: Text('调价'),
                      color: Colours.title_bg,
                      textColor: Color(0xff626262),
                      onPressed: () {}),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget operationWiget(String imagePath, String title) {
    return Container(
      color: Colours.green_1,
      child: Row(
        children: [
          Image.asset(
            imagePath,
            width: AppSize.width(28),
            height: AppSize.height(28),
          ),
          Text(
            title,
            style: TextStyle(
              color:Color(0xff626262),
            ),
          ),
        ],
      ),
    );
  }
}
